<template>
  <view class="content">
    <view class="record">
      <image
        class="record_image"
        :src="productDetail_product_snap.cover"
      ></image>

      <view class="record_content">
        <view class="record_content_title">{{
          productDetail_product_snap.name
        }}</view>
        <view class="record_content_second">
          <image
            class="record_content_avatar"
            :src="productDetail_product_snap.creator_avatar"
          ></image>

          <view class="record_content_username">{{
            productDetail_product_snap.creator_name
          }}</view>
        </view>

        <view class="record_content_CollectionCode">
          <image
            class="record_content_CollectionIcon"
            src="../../static/collect_icon.png"
          ></image>

          <text class="record_content_no">{{ wholeid.no }}</text>
        </view>
      </view>
    </view>

    <view class="price">
      <text>售卖价格</text>
      <view class="price_input">
        <text>￥</text>
        <input
          v-model="price"
          type="text"
          bindinput="handleInput"
          placeholder="输入售卖价格"
          style="flex: 1"
          @input="checkNum"
        />
      </view>

      <!-- <text>平台手续费({{ shouxuprice }}%)</text> -->
      <text></text>

      <view class="price_gap"></view>
    </view>

    <!-- <view class="title">
      <view>请选择挂售商家</view>
      <view class="title_right" v-if="MerchantSelect" @click="handleSelect">
        换一家
        <image class="title_icon" src="../../static/arrow_right_qin.png"></image
      ></view>
    </view>

    <view class="select" v-if="!MerchantSelect" @click="handleSelect">
      <view>去选择挂售商家</view>
      <image class="select_icon" src="../../static/arrow_right_qin.png"></image>
    </view>
    <view class="selected" v-else>
      <image
        class="selected_icon"
        :src="JSON.parse(MerchantSelect.logo)[0]"
      ></image>
      <view class="selected_content">
        <view class="selected_content_row1">{{ MerchantSelect.name }}</view>
        <view class="selected_content_row2"
          >手续费：{{
            (MerchantSelect.commission_rate * 100).toFixed(2)
          }}%</view
        >
      </view>
    </view> -->

    <view class="agreement">
      <image v-if="true" src="/static/circular.png" class="agreement_img" />
      <image v-else src="/static/Selected.png" class="agreement_img" />
      <view class="agreement_text"
        >我已阅读并同意<text class="highlight">《某某协议》</text></view
      >
    </view>

    <view class="button" @click="$u.debounce(handlePassOn, 1000, true)"
      >发布买单</view
    >

    <u-popup
      v-model="Transaction"
      mode="center"
      width="490rpx"
      height="290rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
      @close="jypassword = ''"
    >
      <view class="Transaction_eject">
        <text class="Transaction_top">输入交易密码</text>
        <input
          type="password"
          value=""
          class="Transaction_center"
          v-model="jypassword"
        />
        <text class="Transaction_bottom" @click="password">确定</text>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import { isLogin } from "@/utils/auth.js";
export default {
  data() {
    return {
      is_cert: "",
      productDetail: null,
      productDetail_product_snap: null,

      wholeid: "",
      price: "",
      user_product_id: "",
      shouxuprice: "",
      Transaction: false,
      jypassword: "",
      MerchantSelect: null,
    };
  },
  onLoad(options) {
    // this.getCommissionprice();
    this.user_product_id = options.user_product_id;
    this.wholeid = JSON.parse(uni.getStorageSync("productDetail"));
    this.productDetail_product_snap = JSON.parse(
      JSON.parse(uni.getStorageSync("productDetail")).product_snap
    );
  },
  onShow() {
    this.MerchantSelect = uni.getStorageSync("MerchantSelect");
  },
  onUnload() {
    uni.removeStorageSync("MerchantSelect");
  },
  methods: {
    handleSelect() {
      uni.navigateTo({
        url: "../MerchantList/MerchantList",
      });
    },
    // async getCommissionprice() {
    //   let res = await api.getCommissionMoney({
    //     method: "get",
    //     loading: "加载中",
    //   });
    //   if (res.code == 0) {
    //     this.shouxuprice = res.data.value * 100;
    //   }
    // },
    async getUserProductDetail() {
      let res = await api.userProductDetail({
        method: "get",
        query: {
          user_product_id: this.user_product_id,
          is_cert: this.is_cert,
        },
      });

      if (res.code === 0) {
        this.productDetail = res.data;
        this.productDetail_product_snap = JSON.parse(res.data.product_snap);
      } else {
        tip.defaults(res.msg);
      }
    },
    password() {
      if (this.jypassword == "") {
        tip.defaults("请输入交易密码");
      } else {
        this.handlePassOn();
      }
    },
    checkNum(e) {
      e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
      this.$nextTick(() => {
        this.price = e.detail.value;
      });
    },
    async handlePassOn() {
      //   if (!this.price) {
      //     tip.defaults("请输入提现金额");
      //     return;
      //   }
      //   if (parseFloat(0) >= parseFloat(this.price)) {
      //     tip.defaults("金额必须大于零");
      //     return;
      //   }
      //   if (this.price.indexOf(0) == 0 && this.price.indexOf(".") != 1) {
      //     tip.defaults("金额必须大于零");
      //     return;
      //   }
      //   if (!this.MerchantSelect) {
      //     tip.defaults("请选择挂售商家");
      //     return;
      //   }
      //   if (!this.jypassword) {
      //     this.Transaction = true;
      //     return;
      //   }
      //   let res = await api.release({
      //     method: "post",
      //     query: {
      //       user_product_id: this.user_product_id,
      //       price: this.price,
      //       operation_password: this.jypassword,
      //       linked_merchant_id: this.MerchantSelect.id,
      //     },
      //     loading: "加载中",
      //   });
      //   if (res.code === 0) {
      //     this.Transaction = false;
      //     tip.defaults("发布成功");
      //     setTimeout(() => {
      //       uni.navigateBack({
      //         delta: 2,
      //       });
      //     }, 1000);
      //   } else {
      //     this.Transaction = false;
      //     tip.defaults(res.msg);
      //   }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;
  //   min-height: 100vh;
  min-height: calc(100vh - 44px);
}

.record {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  width: 690rpx;
  height: 242rpx;
  border-radius: 24rpx;

  background-image: url(../../static/transaction_record_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 242rpx;
  &_image {
    width: 242rpx;
    height: 242rpx;
    border-radius: 24rpx;
  }
  &_content {
    flex: 1;
    padding: 30rpx;
    &_title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: $text-color1;
      line-height: 44rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    &_second {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
    }
    &_avatar {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
    }
    &_username {
      margin-left: 8rpx;
      height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: $text-color1;
      line-height: 36rpx;

      max-width: 300rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &_third {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 40rpx;
    }
    &_price {
      height: 42rpx;
      font-size: 36rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: $text-color1;
      line-height: 42rpx;
    }
    &_status {
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #39a2ff;
      line-height: 34rpx;
    }
    &_CollectionCode {
      padding: 0 30rpx;
      display: inline-block;

      margin-top: 40rpx;
      position: relative;
      left: 16rpx;
      // width: 330rpx;
      height: 34rpx;
      color: #ffffff;
      background: $gradient1;
      border-radius: 18rpx;

      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      text-align: center;
    }
    &_CollectionIcon {
      position: absolute;
      top: -10rpx;
      left: -26rpx;
      width: 52rpx;
      height: 52rpx;
    }
    &_no {
      display: inline-block;
      max-width: 300rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.price {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  background: $bg-color3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text {
    margin: 30rpx;
    color: $text-color1;
  }
  text:first-child {
    font-size: 16px;
  }
  text:nth-child(2) {
    font-size: 12px;
  }
  .price_input {
    height: 100rpx;
    display: flex;
    align-content: flex-start;
    input {
      height: 120rpx;
      line-height: 120rpx;
      color: $text-color1;
    }
    // border-bottom: 2rpx solid #313535;
    text {
      font-size: 22px;
      font-weight: 500;
    }
  }
  &_gap {
    position: absolute;
    left: 30rpx;
    bottom: 62rpx;
    width: 630rpx;
    height: 2rpx;
    background: #313535;
  }
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}

.button {
  //   margin-top: 50rpx;
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 92rpx;
  //   width: 690rpx;
  height: 90rpx;
  background: $button;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 16rpx;

  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 90rpx;
  text-align: center;
}
.title {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // width: 224rpx;
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 44rpx;
  &_right {
    color: #1fe7e7;
  }
  &_icon {
    margin-left: 10rpx;
    width: 28rpx;
    height: 28rpx;
  }
}
.select {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690rpx;
  height: 160rpx;
  background: #292b2b;
  border-radius: 24rpx;

  font-size: 28rpx;
  font-weight: 400;
  color: #1fe7e7;
  line-height: 160rpx;
  &_icon {
    margin-left: 10rpx;
    width: 28rpx;
    height: 28rpx;
  }
}
.selected {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  padding: 20rpx;
  width: 690rpx;
  height: 160rpx;
  background: #292b2b;
  border-radius: 24rpx;
  &_icon {
    width: 120rpx;
    height: 120rpx;
    background: #d8d8d8;
    border-radius: 16rpx;
  }
  &_content {
    margin-left: 28rpx;
    &_row1 {
      // width: 256rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
    }
    &_row2 {
      margin-top: 16rpx;

      // width: 182rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #1fe7e7;
      line-height: 40rpx;
    }
  }
}
.agreement {
  width: 690rpx;
  position: fixed;
  //   left: 40rpx;
  //   right: 40rpx;
  bottom: 216rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  &_img {
    width: 26rpx;
    height: 26rpx;
  }
  &_text {
    margin-left: 10rpx;
    // width: 312rpx;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
  }
  .highlight {
    color: #1fe7e7;
  }
}
</style>